<template>
	<view class="nav-wrapper" :class="{'product-classify': sticky}" :style="{top: top +'px'}">
		<scroll-view class="scroll-wrapper" scroll-x="true" :style="{paddingLeft: padding+'px',paddingRight:padding+'px'}">
			<view class="scroll-item" v-for="(item,index) in navList" :key="index" 
			:class="{'nav-active': index == currentIndex}" @click="navTap(index, item.id)">
				<text :style="{'font-size': size+'px'}">{{item[map]}}</text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name: 'TabNav',
		props: {
			sticky: {
				type: Boolean,
				default: false
			},
			top: {
				type: Number,
				default: 0
			},
			padding: {
				type: Number,
				default: 0
			},
			navList: {
				type: Array,
				default() {
					return []
				}
			},
			map: {
				type: String,
				default: 'name'
			},
			i: {
				type: Number,
				default: 0
			},
			size: {
				type: [Number,String],
				default: 15
			}
		},
		mounted() {
			this.$nextTick(() => {
				this.currentIndex = this.i
			})
		},
    watch: {
      i(newVal) {
        this.currentIndex = newVal
      }
    },
		data() {
			return {
				currentIndex: 0
			}
		},
		methods: {
			navTap(index,id) {
				this.currentIndex = index
				this.$emit('navTap',index)
			}
		}
	}
</script>

<style scoped lang="scss">
	.nav-wrapper{		
		padding: 16rpx 0;
	}
	.product-classify{
		position: sticky;
		left: 0;
		right: 0;
	}
	
	.scroll-wrapper{
		white-space: nowrap;
		&::-webkit-scrollbar {
			width: 0;
			height: 0;
			color: transparent;
		  display: none;
		}
		
		.scroll-item{
			position: relative;
			display: inline-block;
			margin: 0 30rpx;
			text-align: center;
      color: #000;
			opacity: 0.7;
			padding-bottom: 4rpx;
			
			&::after{
				content: '';
				width: 0;
				height: 0;
				border-bottom: 3px solid $uni-color-primary;
				position: absolute;
				left: 49%;
				bottom: 0;
				transform: translateX(-50%);
				transition: .3s;
			}
		}
		.flex{
			display: flex;
			flex-direction: row;
			align-items: center;
			.flex-item{
				flex: 1;
			}
		}
		.nav-active{
			color: #000;
			opacity: 1;
			font-weight: 500;
			&::after{
				width: 80%;
			}
		}
	}
</style>

